<template>
  <div>
    <!-- <myheader title="传智播客.黑马程序员Vue.js"></myheader> -->

    <!-- 滑动栏目 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab v-for="pro in programaList" :key="pro.id" :title="pro.title">
        <!-- 下拉刷新 -->
        <van-pull-refresh
          v-model="programaList[active].isLoadingPull"
          @refresh="onRefresh"
        >
          <!-- 中间内容部分 -->
          <div class="conten">
            <div
              class="imgCell"
              v-for="item in programaList[active].imgList"
              :key="item.id"
              @click="saveBrowse(item.id)"
            >
              <img :src="item.img_url" alt="" />
              <div class="imgDetails">
                <h4>{{ item.title }}</h4>
                <p>{{ item.zhaiyao }}</p>
              </div>
            </div>

            <!-- 点击回到顶部 -->
            <div class="backTop" v-if="topShow" @click="backTop">
              <van-icon name="back-top" />
              <p>TOP</p>
            </div>
          </div>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import myheader from "@/components/Header";
import { getImagesPrograma, getImagesList } from "@/api/img";
export default {
  components: {
    myheader,
  },
  data() {
    return {
      programaList: [], //分类栏目列表
      //   imgList: [],
      active: localStorage.getItem("imgListBrowse") ? 99 : 0, //栏目下标
      topShow: false, //记录当前返回顶部标志的可视状态
    };
  },
  //  检测滑动栏目下标的变化
  watch: {
    async active() {
      //当栏目里的图片列表没有内容时进行加载
      if (this.programaList[this.active].imgList.length == 0) {
        // console.log(1);
        // 获取图片列表
        await this.init();
      }

      // console.log(this.programaList[this.active].scrollTop);
      document.documentElement.scrollTop = document.body.scrollTop = this.programaList[
        this.active
      ].scrollTop;
    },
  },
  async mounted() {
    // console.log(2);
    //  获取到栏目列表
    let res = await getImagesPrograma();
    this.programaList = res.data.message;
    this.programaList.unshift({ title: "全部", id: 0 });
    // console.log(this.programaList);

    // 数据改造:
    // 1.给每个栏目添加输入自己的图片列表信息
    // 2.下拉刷新时,数据加载状态
    // 3.记录当前栏目的浏览部分(滚动位置)
    this.programaList = this.programaList.map((v) => {
      return {
        ...v,
        imgList: [],
        isLoadingPull: false, // 下拉加载状态
        scrollTop: 0, //当前滚动位置
      };
    });

    let imgListBrowse = JSON.parse(localStorage.getItem("imgListBrowse")) || [];
    // console.log(imgListBrowse);
    if (imgListBrowse.length != 0) {
      this.active = imgListBrowse.active;
      this.programaList[this.active].scrollTop = imgListBrowse.scrollTop;
    }

    // console.log(imgListBrowse);
    this.init();

    window.addEventListener("scroll", this.scrollToTop); //监听滚动条

    // console.log(this.programaList);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop); //移除滚动条监听
  },
  methods: {
    // 监听到的滚动的距离
    scrollToTop() {
      // console.log("滚");
      this.programaList[this.active].scrollTop =
        window.scrollY ||
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      // 计算距离顶部的高度，当高度大于300显示回顶部图标，小于300则隐藏
      if (this.programaList[this.active].scrollTop > 300) {
        this.topShow = true;
      } else {
        this.topShow = false;
      }
      // console.log(this.programaList[this.active].scrollTop);
    },
    // 点击回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      // console.log(1);
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.programaList[this.active].scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.programaList[this.active].scrollTop + ispeed;
        if (this.programaList[this.active].scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
      // 直接上移至顶部
      // document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
    // 下拉刷新
    onRefresh() {
      // 清空图片列表信息后再重新加载
      this.programaList[this.active].imgList.length = 0;
      // console.log(this.programaList[this.active].imgList);

      this.init();

      // 手动将isLoadingPull设置为false,关闭下拉刷新
      this.programaList[this.active].isLoadingPull = false;

      // this.$toast.success("刷新成功");
    },
    //   封装根据栏目id获取栏目图片信息
    async init() {
      let res = await getImagesList(this.programaList[this.active].id);
      //   console.log(res);
      this.programaList[this.active].imgList = res.data.message;
      // console.log(this.programaList);
    },
    // 点击图片查看详情页,保留当前浏览位置
    saveBrowse(id) {
      console.log(1);
      localStorage.setItem(
        "imgListBrowse",
        JSON.stringify({
          active: this.active,
          scrollTop: this.programaList[this.active].scrollTop,
        })
      );
      // console.log(id);
      this.$router.push({
        path: `/photo/${id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.myheader {
  height: 40px;
}
.backTop {
  width: 30px;
  height: 36px;
  text-align: center;
  color: #087aff;
  position: fixed;
  right: 15px;
  bottom: 130px;
  background-color: #fff;
  /deep/ .van-icon {
    font-size: 20px;
  }
  p {
    margin: 0 0;
    font-size: 12px;
  }
}
/deep/ .van-tab__text {
  color: #4ba0ff;
  font-weight: 550;
}

/deep/ .van-tabs__line {
  background-color: #4ba0ff;
}

.conten {
  padding-bottom: 50px;
}

.imgCell {
  width: 95%;
  height: 150/360 * 100vh;
  position: relative;
  // margin-bottom: 2px;
  margin: 0 auto 5px;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .imgDetails {
    padding: 0 7px;
    width: 96%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    h4 {
      margin: 0 0;
      overflow: hidden; //将超出的部分隐藏
      text-overflow: ellipsis; //超出部分用省略号显示
      white-space: nowrap; //溢出不换行
    }
    p {
      margin: 0 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>